<template>
    <el-container>
  <el-header style="width:1800px">
    <el-row>
      <el-card class="box-card">
            <el-col :span="2" :offset="0">
                优惠卷列表
            </el-col>
            <el-col :span="2" :offset="0" :push="17">
              <i class="el-icon-refresh"></i>
              <el-button type="primary" plain>刷新</el-button>
            </el-col>
            <el-col :span="2" :offset="0" :push="17">
              <i class="el-icon-arrow-left"></i>
              <el-button type="success" plain>返回</el-button>
            </el-col> 
      </el-card>
    </el-row>
  </el-header>
  <el-container>
    <el-main>
      <el-row :gutter="20">
       <el-card class="box-card" style="width:1800px">
          <div slot="header" class="clearfix">
            
            <span><i class="el-icon-search"></i>筛选查询</span>
            <el-button style="float:right">高级检索</el-button>
            <el-button style="float:right" @click="mohu">查询结果</el-button>
          </div>
          <div>
            <el-form  ref="form" :model="mohuForm"  label-width="80px" :inline="false" size="normal">
              <el-col :span="4" :offset="0">
              <el-form-item label="优惠卷名称" label-width="100px">
              <el-input v-model="mohuForm.couponName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0" :push="5">
                <el-form-item label="获取方式" :label-width="formLabelWidth">
                  <el-select v-model="mohuForm.grant" placeholder="选择获取方式">
                    <el-option label="无" value=""></el-option>
                    <el-option label="自动发放" value="2"></el-option>
                    <el-option label="活动领取" value="3"></el-option>
                    <el-option label="人工发放" value="4"></el-option>
                    <el-option label="无限制" value="5"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4" :offset="0" :push="10">
              <el-form-item label="优惠卷状态" label-width="100px">
                  <el-select v-model="mohuForm.online" placeholder="优惠卷状态">
                    <el-option label="无" value=""></el-option>
                    <el-option label="上线" value="2"></el-option>
                    <el-option label="下线" value="3"></el-option>
                  </el-select>
            </el-form-item>
            </el-col>
            </el-form>
          </div>
        </el-card>
      </el-row>
      <el-row :gutter="20">
        <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>优惠卷列表</span>
    <el-button style="float: right; padding: 3px 0" @click="dialogAdd = true" type="text">添加优惠卷</el-button>
    </div>
  <div>
     <el-table
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      >
    </el-table-column>
    <el-table-column
      fixed
      prop="couponCode"
      label="编号"
      width="100px"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="couponName"
      label="优惠卷名称"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="startDate"
      label="开始时间"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="endDate"
      label="结束时间"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="online"
      label="上线/下线"
      align="center"
      >
      <template slot-scope="scope">
       <el-switch
        :plain=true
        @change="changeStatus($event,scope.row,scope.$index)"
        v-model="scope.row.online"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="上线"
        inactive-text="下线"
        :active-value="2"
        :inactive-value="3">
      </el-switch>
     </template>
    </el-table-column>
    <el-table-column
      prop="grant"
      label="发放方式"
      align="center"
      >
        <template slot-scope="scope">
            <!-- scope.row 包含表格里当前行的所有数据 -->
            <span :class="scope.row.grant?'act':'inact'">
                {{scope.row.grant | couponCstatus}}<br>
            </span>
        </template>
    </el-table-column>
    <el-table-column
      prop="issueQuantity"
      label="数量"
      width="150px"
      align="center"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="WatchClick(scope.row,scope.$index)" type="text" size="medium">查看</el-button>
        <el-button type="text" @click="deleteCourse(scope.row,scope.$index)" size="medium">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 点击查看按钮的弹窗 -->
  <el-dialog title="" :visible.sync="dialogWatch" :destroy-on-close="true">
      <el-descriptions title="" direction="vertical" :column="2" border>
        <el-descriptions-item label="编号">{{Watch.couponCode}}</el-descriptions-item>
        <el-descriptions-item label="优惠卷名称">{{Watch.couponName}}</el-descriptions-item>
        <el-descriptions-item label="开始时间" >{{Watch.startDate}}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{Watch.endDate}}</el-descriptions-item>
        <el-descriptions-item label="优惠卷状态">{{Watch.online==2?"上线":"下线"}}</el-descriptions-item>
        <el-descriptions-item label="获取方式">{{Watch.grant | couponCstatus}}</el-descriptions-item>
        <el-descriptions-item label="数量" :span="2">{{Watch.issueQuantity}}</el-descriptions-item>
      </el-descriptions>
  </el-dialog>
  <!-- 点击添加按钮打开添加页面 -->
  <el-dialog title="添加优惠券" :visible.sync="dialogAdd" :destroy-on-close="true">
  <el-form :model="addForm">
    <el-form-item label="优惠卷名称" :label-width="formLabelWidth">
      <el-input v-model="addForm.couponName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="开始时间" :label-width="formLabelWidth">
       <el-date-picker
      v-model="addForm.startDate"
      type="date"
      placeholder="选择开始时间">
    </el-date-picker>
    </el-form-item>
    <el-form-item label="到期时间" :label-width="formLabelWidth">
    <el-date-picker
      v-model="addForm.endDate"
      type="date"
      placeholder="选择到期时间">
    </el-date-picker>
    </el-form-item>
    <el-form-item label="上线/下线" :label-width="formLabelWidth">
        <el-switch
        v-model="addForm.online"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="上线"
        inactive-text="下线"
        :active-value="2"
        :inactive-value="3">
      </el-switch>
    </el-form-item>
    <el-form-item label="发行数量" :label-width="formLabelWidth">
      <el-input v-model="addForm.issueQuantity" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="获取方式" :label-width="formLabelWidth">
       <el-select v-model="addForm.grant" placeholder="选择获取方式">
        <el-option label="自动发放" value="2"></el-option>
        <el-option label="活动领取" value="3"></el-option>
        <el-option label="人工发放" value="4"></el-option>
        <el-option label="无限制" value="5"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="addCourse">确 定</el-button>
  </div>
</el-dialog>
</div>



  <!-- 分页 -->
    <el-col :span="5" :offset="0" :push="15" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
             background
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
        </el-pagination>
    </el-col>
</el-card>
      </el-row>
      
    </el-main>
  </el-container>
</el-container>
 
</template>

<script>
export default {
    data() {
      return {
        formLabelWidth:"120px",
        //控制审核详情页面的变量
        dialogCstatus:false,
        //控制查看页面的变量
        dialogWatch:false,
        //控制编辑页面的变量
        dialogUpdate:false,
        //控制添加页面的变量
        dialogAdd:false,
        //查看页面数据
        Watch:{},
        //添加课程表单数据
        addForm:{
          // createId:'',
        },
        //模糊查表单数据
        mohuForm:{},
        //编辑课程from表单数据
        update:{
          
        },
        currentPage: 1, // 当前页码
        total: 20, // 总条数
        pageSize: 5, // 每页的数据条数
        //  表格数据
        tableData: [],
        //弹窗内审核详情表格信息
        Cstatus:[],
        // 树的数据
        TreeData: [],
        //树指定数据格式
        TreeProps: {
          children: 'children',
          label: 'name'
        },
        //编辑页面上传人下拉框数据
        option:[],
        //上传人下拉框的值
        
      }
    },
    methods:{
      
      mohu(){
        this.$http.get('/Coupon/getTableData',{
          params:this.mohuForm
        }).then(res=>{
           this.tableData=res.data
        })
       
      },
      
      
      
      //查看按钮点击事件
      WatchClick(row,index){
          this.dialogWatch=true;
          for (let i = 0; i<this.tableData.length; i++){
                    if (this.tableData[i] == row){
                    this.Watch=this.tableData[i]
                    }
                }
         console.log(this.Watch)
      },
      
      
      
      //上线下线状态改变时的回调
      changeStatus(e,row,index){
          let code=this.tableData[index].online;
          let id=this.tableData[index].couponId;
          var params = new URLSearchParams();
          params.append('id',id)
          params.append('code',code)
        this.$http({
        method:'post',
        url:'/Coupon/UpdateOnline',
        data:params,
        }).then(res=>{
            console.log(res.data)
            if(res.data==200){
                this.$message({
                    message:"状态更新成功",
                    type:'success'
                })
            }else{
                this.$message({
                    message:"状态更新失败",
                    type:'error'
                })
                if(e==2){
                    this.tableData[index].courseStatus=3;
                }else if(e==3){
                    this.tableData[index].courseStatus=2;
                }
            }
        })
      },
      //删除指定课程
      deleteCourse(row,index){
        var params = new URLSearchParams();
        params.append("id",row.couponId)
        this.$http({
        method:'post',
        url:'/Coupon/deleteCoupon',
        data:params,
        }).then(res=>{
            if(res.data){
                for (let i = 0; i<this.tableData.length; i++){
                    if (this.tableData[i] == row){
                    this.tableData.splice(i, 1)
                    }
                }
                this.$message({
                    message:"删除成功",
                    type:'success'
                })
            }else{
                this.$message({
                    message:"删除失败",
                    type:'error'
                })
            }
        })
      },
   
      //添加课程的函数
      addCourse(){
        this.$http({
          method:'post',
          url:'/Coupon/addCoupon',
          data:JSON.parse(JSON.stringify(this.addForm))
        }).then(res=>{
          if(res.data){
            this.$message("添加成功")
            this.getTableData()
            this.dialogAdd=false
          }
        })
        
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
       getTableData(){
          this.$http.get('/Coupon/getTableData').then(res=>{
              this.$store.state.coupon=res.data
              this.tableData=this.$store.state.coupon
          })
      }
    },
    
    filters:{
      // 过滤审核状态
      couponCstatus(status){
        if(status==2){
          return '自动发放'
        }else if(status==3){
          return '活动领取'
        }else if(status==4){
          return '人工发放'
        }else if(status==5){
          return '无限制'
        }
      }
    },
    created(){
      this.getTableData();
      
    }


}
</script>


<style lang="scss" scoped>
body{
  background: #F9F9F9;
}
.el-header {
    margin-bottom: 50px;
    // background-color: #6BC9BB;
    // background-color: #F2F6FC;
    color: #333;
    text-align: center;
    // line-height: 60px;
  }
.el-row{
  margin-bottom: 30px;
}
</style>